<template>
  <div>
      <div id="chartDom" ref="chartDom" style="width:600px;height:400px"></div>
  </div>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
  name: 'ChartShow',

  data() {
    return {
      
    };
  },
  computed:{
    ...mapGetters(["chartCode"]) //图表需要的code
  },
  watch:{
    chartCode(){
      this.makeChart();
    }
  },
  mounted() {
     this.makeChart();
  },

  methods: {
      makeChart(){
         let chartDom =this.$echarts.init(this.$refs.chartDom);
      
        // echcarts的setOption参数 setOption（option,noMerage 设置为true不予上次的option合并）
         chartDom.setOption(JSON.parse(this.chartCode),true)
         window.addEventListener('resize',chartDom.resize())
      }
  },
  beforeDestroy() {
     window.removeEventListener('resize',()=>this.$refs.chartDom.__echarts_instance__.resize)
  
  },
};
</script>
<style lang="scss">
    
</style>